<template>
    <div class="orderrow">
        <el-scrollbar
            :native = true
            max-height = '92vh'
        >
                <el-card
                    v-for="item in orderData"
                    :key="item"
                    class='cardtotal'
                    @click="EnterOrder(item)"
                >
                    <template #header>
                        <span>订单{{item.ddID}}</span>
                    </template>
                    <el-table
                        :data="[item]"
                        :stripe = true
                    >
                        <el-table-column prop="ddID" label="订单号" width="180" />
                        <el-table-column prop="cliID" label="客户编号" width="180" />
                        <el-table-column prop="ProNum" label="需求数量" width="180" />
                        <el-table-column prop="BPID" label="蓝图编号" width="180" />
                        <el-table-column prop="CZ" label="材质" width="180" />
                        <el-table-column prop="DJ" label="等级" width="180" />
                        <el-table-column prop="JqTime" :formatter='datatrans' label="交期" width="180"/>
                        <el-table-column prop="bz" label="备注"  />
                    </el-table>
                </el-card>
        </el-scrollbar>
    </div>
</template>

<script lang="ts">
import bus from '../../utils'
import { onMounted, reactive, toRefs } from "vue";
import {
    ElTable,
    ElTag,
    ElTableColumn,
    ElRow,
    ElScrollbar,
    ElCard,
    ElCol,
} from "element-plus";
import axios from 'axios';
import UserStore from '../../store/userstore';

export default {
    name: "订单区",
    components: {
        ElTable,
        ElTag,
        ElTableColumn,
        ElRow,
        ElScrollbar,
        ElCard,
        ElCol,
    },
    props:{
    },
    setup(props: any) {
        const store = UserStore()
        const data = reactive({
            orderData: [] as any,
            cardtodo: 'cardtodo',
            carddone: 'carddone',
        });
        const methods = reactive({
            EnterOrder: (msg : any) => {
                bus.emit(`EnterOrder`)
                store.orderid = msg.ddID
            },
            datatrans: (msg : any) => {
                let date = new Date(parseInt(msg.JqTime)).toLocaleString()
                return date
            },
        });
        bus.on(`refreshorder`,(msg : any) => {
            axios.get('http://localhost:9000/orderinfo').then((res) => {
                data.orderData = res.data.data
            })
        })
        onMounted(() => {
            axios.get('http://localhost:9000/orderinfo').then((res) => {
                data.orderData = res.data.data
            })
        })
        return {
            ...toRefs(data),
            ...toRefs(methods),
        };
    },
};
</script>

<style>
    @import url(../../assets/css/order.css);
</style>
